<template>
	<view class='refreshBox' :style="isTranform">
		<view class='refresh' :style="isZoom" :class="isEnd==2?'animationSmall':''">
			<!-- <view class='refreshWord' v-if="isEnd == 0">松开刷新</view> -->
			<!-- <image :style="isZoom" class='refreshWord' src="../static/img/refresh_loading.gif" mode="aspectFill"></image> -->
			<!-- <view class='refreshCirle animation' v-if="isEnd == 1"></view> -->
			
			<view class="upwarp-progress mescroll-rotate" v-if="isEnd === 1 || isEnd == 2"></view>
			
			<image class='iconYes' src='http://td.pro.youzewang.com/refresh_loading.png?v=1' v-if="isEnd==0"></image>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: 'refresh',
		props: {
			  isTop:{
				  type:Number,
				  default:1
			  }
		},
		data() {
			return {
				isTranf: 0,
				touchStart: '',
				touchMove: '',
				isEnd: 0
			};
		},
		
		methods: {
			refreshStart(e) {
				if (this.isEnd == 0 && this.isTop == 1) {
					this.touchStart = e.changedTouches[0].pageY
				}
			},
			refreshMove(e){
				if (this.isEnd == 0 && this.isTop == 1) {
					var touchStart = this.touchStart,
						oldMove = this.touchMove,
						newMove = e.changedTouches[0].pageY
					if (touchStart <= newMove) {
						var isTranf = touchStart > newMove ? 0 : newMove - touchStart
						this.isTranf = isTranf
						this.touchMove = e.changedTouches[0].pageY
					}
				} else{
					this.isTranf = 0
					this.isEnd = 0
					this.touchStart = 9999
				}
			},
			refreshEnd(e) {
				var that = this
				if (this.isEnd == 0 && this.isTop == 1) {
					if (this.isTranf >= 90) {
						this.isTranf = 125
						this.isEnd = 1
						this.$emit('isRefresh');
					} else {
						this.isTranf = 0
					}
				}
			},
			endAfter(){
				this.isEnd = 2
				setTimeout(() => {
					this.isTranf = 0
					this.isEnd = 0
				}, 600)
			}
		},
		computed: {
			isTranform() {
				var isTranf = this.isTranf > 150 ? 150 : this.isTranf
				var isTemp = `transform: translateY(${isTranf-100}px);`
				return isTemp
			},
			isZoom() {
				var isTranf = this.isTranf > 125 ? 125 : this.isTranf
				var isTemp = `zoom:${isTranf/125};`
				return isTemp
			}
		}

	}
</script>

<style lang="scss">
	.refreshBox {
		margin:40upx auto;
		width: 100%;
		height: 100upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		max-height: 300upx;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		transform: translateY(-100upx);
	}

	.animationSmall {
		animation: small 0.3s both;
	}

	@keyframes small {
		0% {
			transform: scale(1)
		}
		100% {
			transform: scale(0)
		}
	}
	.refreshWord{
		width: 150upx;
		height: 26upx;
		font-size: 24upx;
		line-height: 26upx;
		text-align: center;
		border-radius: 26upx;
	}

	.refresh {
		min-width: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50upx;
		box-shadow: 0 0 16upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 50%;
	}

	.refreshCirle {
		width: 26upx;
		height: 26upx;
		border-radius: 50%;
		display: inline-block;
		position: relative;
		border: 6upx solid black;
		border-bottom-color: transparent;
		border-top-color: transparent;
	}

	.animation {
		animation: rotate 1.1s infinite;
		animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.true {
		color: black;
	}

	.iconYes {
		width: 60upx;
		height: 60upx;
	}
	
	.mescroll-rotate {
		-webkit-animation: mescrollRotate 0.6s linear infinite;
		animation: mescrollRotate 0.6s linear infinite;
	}
	
	@-webkit-keyframes mescrollRotate {
		0% {
			-webkit-transform: rotate(0deg);
		}
	
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	@keyframes mescrollRotate {
		0% {
			transform: rotate(0deg);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
	
	.upwarp-progress{
		width: 30px;
		height: 30px;
		border: none;
		margin: auto;
		background:url('http://td.pro.youzewang.com/refresh_loading.png?v=1');
	    background-size: 100% 100%;
		-webkit-animation: progressRotate .6s steps(6,start) infinite;
		animation: progressRotate .6s steps(6,start) infinite;
	}
	
	@-webkit-keyframes progressRotate {
		0% {-webkit-transform:rotate(0deg);}
		12.5% {-webkit-transform:rotate(45deg);}
		25% {-webkit-transform:rotate(90deg);}
		37.5% {-webkit-transform:rotate(135deg);}
		50% {-webkit-transform:rotate(180deg);}
		62.5% {-webkit-transform:rotate(225deg);}
		75% {-webkit-transform:rotate(270deg);}
		87.5% {-webkit-transform:rotate(315deg);}
		100% {-webkit-transform:rotate(360deg);}
	}
	@keyframes progressRotate {
		0% {transform:rotate(0deg);}
		12.5% {transform:rotate(45deg);}
		25% {transform:rotate(90deg);}
		37.5% {transform:rotate(135deg);}
		50% {transform:rotate(180deg);}
		62.5% {transform:rotate(225deg);}
		75% {transform:rotate(270deg);}
		87.5% {transform:rotate(315deg);}
		100% {transform:rotate(360deg);}
	}
	
</style>
